<script lang="ts" setup>
import { reactive, ref } from 'vue';

import { Page } from '#/components/page';

const tabList = ref([
  { label: '轮播/广告', value: 'login' },
  { label: '用户等级', value: 'operate' },
]);

const searchParams = reactive<any>({
  type: tabList.value[0]?.value,
});

function handleTabChange(type) {
  searchParams.type = type;
}
</script>

<template>
  <Page content-class="h-full">
    <a-row :gutter="[12, 0]" class="h-full">
      <a-col :span="4" class="h-full">
        <div class="h-full w-full rounded-lg bg-white p-2">
          <a-list
            :bordered="false"
            :data-source="tabList"
            item-layout="horizontal"
            size="small"
          >
            <template #renderItem="{ item }">
              <a-list-item
                :class="{ active: searchParams.type === item.value }"
                class="list-item h-[52px] cursor-pointer"
                @click="handleTabChange(item.value)"
              >
                <a-list-item-meta>
                  <template #title>
                    <span> {{ item.label }}</span>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </div>
      </a-col>

      <a-col :span="20" class="h-full">
        <div class="flex h-full flex-1 flex-col"></div>
      </a-col>
    </a-row>
  </Page>
</template>

<style lang="scss" scoped>
.active {
  color: #2d8cf0;
  background: #f0faff;

  :deep(.ant-list-item-meta-title) {
    color: #2d8cf0 !important;
  }

  :deep(.ant-list-item-meta-description) {
    color: #2d8cf0 !important;
  }

  &:hover {
    background: #f0faff;
  }
}

:deep(.ant-tabs-nav-wrap) {
  justify-content: center;
}
</style>
